<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> 筑为智慧-建企经营管理系统 - 筑为科技 </title>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel='stylesheet' href='/static/admin/css/load.css'>
    <link rel='stylesheet' href='/static/component/layui/css/layui.css'>
    <link rel='stylesheet' href='/static/admin/css/admin.css'>
    <link rel='stylesheet' href='/static/admin/css/common.css'>
    <link rel="stylesheet" href="/static/admin/viewer/viewer.min.css">
    <script src='/static/component/layui/layui.js'></script>
    <script src='/static/component/laytp/layuiConfig.js'></script>
    <script src='/static/component/jquery_3.3.1.js'></script>


    <script src="/static/admin/viewer/viewer.min.js"></script>
    <link rel="stylesheet" href="/static/component/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/component/lib/bootstrap/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="/static/component/lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/component/lib/bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/static/component/lib/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    <link rel='stylesheet' href="/static/admin/css/soulTable.css">

    <script src="/budtab.js"></script>
</head>
<style>
    .budbox {
        height: 600px;
        position: relative;
        overflow: auto;
        border: 1px solid #ccc;
    }
    .budbox table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        background-clip: padding-box;
    }
    .tablewid{
        width: 100%;
    }
    .tablewidauto{
        width: auto;
    }

    .budbox table thead tr th{
        border: 1px solid #ccc;
        font-weight: 400;
        width: 120px;
        box-sizing: border-box;
        background-color: #eee;
        position: sticky;
        top: -1px;
        text-align: left;
        background-clip: padding-box;
        border-collapse: collapse;
        padding: 5px 10px;
        font-size: 12px;
    }

    .budbox table thead tr th.widzhan{
        width: 300px;
    }
    .budbox table thead tr th:first-child{
        position: sticky;
        left: -1px;
        z-index: 1;
        width: 50px!important;
        min-width: 50px;
        max-width: 100px;
    }

    .budbox table tbody tr td{
        border: 1px solid #ccc;
        box-sizing: border-box;
        background-clip: padding-box;
        border-collapse: collapse;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;
        color: #1f1f1f;
        cursor: context-menu;
        text-overflow:ellipsis;
        height: 30px;
    }
    .budbox table tbody tr td .tdvv{
        line-height: 20px;
    }
    .budbox table tbody tr td.disad{
        cursor: not-allowed;
    }
    .budbox table tbody tr td:hover{
        border: 2px solid #bed0e2;
    }
    .budbox table tbody tr.activetr{
        border: 2px solid #409EFF;
    }
    .budbox table tbody tr td.active{
        border: 2px solid #409EFF;
    }
    .budbox table tbody tr td:first-child{
        position: sticky;
        left: -1px;
        background: #FFFFFF;
        width: 50px!important;
        min-width: 50px;
        max-width: 100px;
    }
    .budbox table tbody tr td .levicon{
        cursor: pointer;
        margin-right: 4px;
        color: #848484;
        font-size: 12px;
    }
    .lev2{padding-left: 30px!important;}
    .lev3{padding-left: 50px!important;}
    .lev4{padding-left: 70px!important;}
    .lev5{padding-left: 90px!important;}
    .lev6{padding-left: 110px!important;}
    .lev7{padding-left: 130px!important;}
    .lev8{padding-left: 150px!important;}
    .lev9{padding-left: 170px!important;}
    .lev10{padding-left: 190px!important;}




    #contextmenuDiv {
        position: fixed;
        z-index: 100;
        background-color: #FFFFFF;
    }

    #contextmenuDiv ul {
        float: left;
        border: 1px solid #bbbbbb;
        box-shadow: 2px 2px 2px rgba(0,0,0,.3);
        margin-bottom: 0;
    }

    #contextmenuDiv ul li {
        width: 120px;
        text-align: center;
        float: left;
        clear: both;
        height: 30px;
        cursor: pointer;
        line-height: 30px;
        white-space: nowrap;
        border-bottom: 1px solid #aecff7;
    }
    #contextmenuDiv ul li:hover {
        background-color: #aecff7;
        color: #FFFFFF;
    }

    #futext {
        position: fixed;
        z-index: 100;
        white-space: pre-line;
        background-color: #FFFFFF;
        border: 1px solid #aecff7;
        width: auto;
        height: auto;
        padding: 10px;
    }
    #columnDiv{
        position: fixed;
        z-index: 100;
        white-space: pre-line;
        background-color: #FFFFFF;
        border: 1px solid #aecff7;
        width: auto;
        height: auto;
        padding: 10px 30px;
    }
    #columnDiv .cols{
        padding: 3px 0;
        position: relative;
        cursor: pointer;
    }
    #columnDiv .cols .chbox{
        height: 15px;
        width: 20px;
        position: relative;
        top: 3px;
        margin-right: 4px;
    }
    .laytp-btn-grey{
        background-color: #eeeeee !important;
        border: #eeeeee;
        color: #555;
    }
</style>

<body style="width: 80%;margin: 0 10%;">
<div style="height: 30px"></div>
<div style="text-align: center;">
    <button id="budtable_cancel" type="button" class="laytp-btn laytp-btn-grey">撤销</button>
    <button id="budtable_copy_row" type="button" class="laytp-btn laytp-btn-success">复制行</button>
    <button id="budtable_paste_row" type="button" class="laytp-btn laytp-btn-success">粘贴行</button>
    <button id="budtable_top_row" type="button" class="laytp-btn laytp-btn-success">上移</button>
    <button id="budtable_bottom_row" type="button" class="laytp-btn laytp-btn-success">下移</button>
    <button id="budtable_del_row" type="button" class="laytp-btn laytp-btn-success">删除行</button>
    <button id="budtable_delall_row" type="button" class="laytp-btn laytp-btn-success">删除全部</button>
    <button id="budtable_open_close_column" type="button" class="laytp-btn laytp-btn-success">展开列</button>
    <ul class="layui-nav layui-btn laytp-btn-success" style="padding: 0;margin-bottom: 0">
        <li class="layui-nav-item">
            <a class="laytp-btn laytp-btn-success">插入行</a>
            <dl class="layui-nav-child" style="top: 30px;padding: 0;">
                <dd><button id="budtable_nav_row" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid">分部行</button></dd>
                <dd><button id="budtable_navchild_row" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid">子分部行</button></dd>
                <dd><button id="budtable_list_row" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid">清单行</button></dd>
            </dl>
        </li>
    </ul>
    <button id="budtable_sets_column" type="button" class="laytp-btn laytp-btn-success">列设置</button>
</div>
<div style="height: 100px"></div>

<div class="budbox" >
    <table id="budtable" class="tablewid" openkey="0" onselectstart="return false"></table>
</div>

<script>

    layui.use(['form', 'layer', "laytp",'element','table','soulTable','treeTable'], function() {
        var laypage = layui.laypage, table = layui.table, form = layui.form, soulTable = layui.soulTable,treeTable=layui.treeTable;



        var data = [];
        for (mm=1; mm<=1; mm++){
            var hangObjss = {};
            for (i=1; i<=15; i++){
                var name = 'explain'+i;
                var value = '哈哈哈哈哈哈-'+mm+'-'+i;
                hangObjss[name] = value;
            }
            if(mm == 1){
                hangObjss.children = [
                    {explain1:'嘻嘻嘻嘻1',explain2:'就将计就计1',children:[
                            {explain1:'AAAAAAAAA',explain2:'就将计就计3',children:[
                                    {explain1:'嘻嘻嘻嘻3',explain2:'就将计就计3',children:[
                                            // {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                        ]},
                                    {explain1:'嘻嘻嘻嘻3333',explain2:'就将计就计3333',children:[
                                            // {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                        ]},
                                    {explain1:'嘻嘻嘻嘻444',explain2:'就将计就计444',children:[
                                            {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                                            {explain1:'撒大苏打阿'
                                                ,explain2:'撒大苏撒大苏打阿撒\n大苏打阿撒大\n苏打阿撒大苏\n打阿撒大苏打阿撒大苏打\n阿撒大苏打阿打阿'
                                                ,explain3:'撒大苏打阿'
                                                ,explain4:'撒大苏打阿'
                                                ,explain5:'撒大苏打阿'
                                            },
                                            {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                            {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                        ]},
                                    {explain1:'嘻嘻嘻嘻666',explain2:'就将计就计666',children:[
                                            // {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                            // {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                                        ]},

                                ]},
                        ]},
                    {explain1:'水水水水3',explain2:'啦啦啦3',children:[
                            {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                        ]},
                    {explain1:'水水水水4',explain2:'啦啦啦4',children:[
                            {explain1:'BBBBBB1',explain2:'BBBBBBBB1'},
                            {explain1:'BBBBBB2',explain2:'BBBBBBBB2'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                            {explain1:'BBBBBB3',explain2:'BBBBBBBB3'},
                        ]
                    },
                ];
            }
            data.push(hangObjss);
        }




        init({
            dom:'budtable',
            header:[
                {type:'numbers',title:'序号'},
                {type:'cate',field:'explain1',title:'表头1'},
                {field:'explain2',title:'表头2'},
                {field:'explain3',title:'表头3'},
                {field:'explain4',title:'表头4'},
                {field:'explain5',title:'表头5'},
                {field:'explain6',title:'表头6'},
                {field:'explain7',title:'表头7'},
                {field:'explain8',title:'表头8'},
                {field:'explain9',title:'表头9'},
                {field:'explain10',title:'表头10'},
                {field:'explain11',title:'表头11'},
                {field:'explain12',title:'表头12'},
                {field:'explain13',title:'表头13'},
                {field:'explain14',title:'表头14'},
                {field:'explain15',title:'表头15'},
            ],
            data: data,
        });

    });




    // var aaaa = true;
    //
    // document.addEventListener('copy',function(e){
    //     if(aaaa){
    //         copy('埃里克大家阿克苏巨大的');
    //     }
    //     return false;
    // })
    //
    //
    //
    //
    // function copy(content){
    //     aaaa = false;
    //     const ele = document.createElement('input')
    //     ele.setAttribute('value', content)
    //     document.body.appendChild(ele)
    //     ele.select()
    //     document.execCommand('copy')
    //     document.body.removeChild(ele)
    // }






</script>
</body>
</html>




